<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="description" content="Responsive Admin Template" />
    <meta name="author" content="SmartUniversity" />
    <title>Spice Hotel | Bootstrap 4 Admin Dashboard Template + UI Kit</title>
    <!-- google font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
	<!-- icons -->
    <link th:href="@{/assets/plugins/simple-line-icons/simple-line-icons.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
	<!--bootstrap -->
	<link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <!-- Material Design Lite CSS -->
	<link rel="stylesheet" th:href="@{/assets/plugins/material/material.min.css}">
	<link rel="stylesheet" th:href="@{/assets/css/material_style.css}">
	<!-- animation -->
	<link th:href="@{/assets/css/pages/animate_page.css}" rel="stylesheet">
	<!-- Template Styles -->
    <link th:href="@{/assets/css/style.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/plugins.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/responsive.css}" rel="stylesheet" type="text/css" />
	<link th:href="@{/assets/css/theme-color.css}" rel="stylesheet" type="text/css" />
	<!-- dropzone -->
    <link th:href="@{/assets/plugins/dropzone/dropzone.css}" rel="stylesheet" media="screen">
    <!-- Date Time item CSS -->
    <link rel="stylesheet" th:href="@{/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.css}" />
	<!-- favicon -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" />
</head>
<!-- END HEAD -->
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md header-white dark-sidebar-color logo-dark">
    <div class="page-wrapper">
        <!-- start header -->
		<div th:replace="~{commons::headnavbar}"></div>
        <!-- end header -->
        <!-- start page container -->
        <div class="page-container">
 			<!-- start sidebar menu -->
			<div th:replace="~{commons::sidebar(active='add_staff',open='staff')}"></div>
			 <!-- end sidebar menu -->
			<!-- start page content -->
            <div class="page-content-wrapper">
                <div class="page-content">
                    <div class="page-bar">
                        <div class="page-title-breadcrumb">
                            <div class=" pull-left">
                                <div class="page-title">Add Staff Details</div>
                            </div>
                            <ol class="breadcrumb page-breadcrumb pull-right">
                                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="../index.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li><a class="parent-item" href="">Staff</a>&nbsp;<i class="fa fa-angle-right"></i>
                                </li>
                                <li class="active">Add Staff Details</li>
                            </ol>
                        </div>
                    </div>
                     <div class="row">

							<div class="col-sm-12">

								<form class="card-box" th:action="@{/staff/addStaff}" th:method="post">

									<div class="card-head">
										<header>添加员工信息</header>
										<button id = "panel-button" 
				                           class = "mdl-button mdl-js-button mdl-button--icon pull-right" 
				                           data-upgraded = ",MaterialButton">
										</button>

									</div>
									<div class="card-body row">
							            <div class="col-lg-6 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "text" id = "txtFirstName" name="sname">
						                     <label class = "mdl-textfield__label">员工姓名</label>
						                  </div>
							            </div>

							             <div class="col-lg-6 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "email" id = "txtemail" name="email">
						                     <label class = "mdl-textfield__label" >邮箱地址</label>
						                      <span class = "mdl-textfield__error">Enter Valid Email Address!</span>
						                  </div>
							            </div>

							            <div class="col-lg-6 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "text" id = "date" name="joindate">
						                     <label class = "mdl-textfield__label" >入职时间</label>
						                  </div>
							            </div>


							            <div class="col-lg-6 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "text" id = "designation" name="designation">
						                     <label class = "mdl-textfield__label" >职位</label>
						                  </div>
							            </div>
							             <div class="col-lg-6 p-t-20"> 
							              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height txt-full-width">
											  <label>性别</label><br/>
											  <div class="form-check form-check-inline">
												  <input class="form-check-input" type="radio" name="gender" value="1" >
												  <label class="form-check-label">男</label>
											  </div>
											  <div class="form-check form-check-inline">
												  <input class="form-check-input" type="radio" name="gender" value="0" >
												  <label class="form-check-label">女</label>
											  </div>
									        </div>
							            </div>
										<div class="col-lg-6 p-t-20">
							               <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "text" 
						                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5" name="phone">
						                     <label class = "mdl-textfield__label" for = "text5">手机号码</label>
						                     <span class = "mdl-textfield__error">Number required!</span>
						                  </div>
							            </div>
							            <div class="col-lg-6 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" type = "text"  name="age" value="">
						                     <label class = "mdl-textfield__label" >年龄</label>
						                  </div>
							            </div>
							            <div class="col-lg-12 p-t-20"> 
							              <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width">
						                     <input class = "mdl-textfield__input" id = "text" type="text" name="address">
						                     <label class = "mdl-textfield__label" >地址</label>
						                  </div>
								         </div>


								         <div class="col-lg-12 p-t-20 text-center"> 
							              	<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink">Submit</button>
											<button type="reset" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default">Cancel</button>
							            </div>
									</div>

									<div class="col-lg-12 p-t-20 text-center" >
										<input  th:value="${failaddStaff}" th:if="${failaddStaff!=null}"></input>
									</div>

								</form>

							</div>

						</div> 
                </div>
            </div>
            <!-- end page content -->

			<!-- start chat sidebar -->
			<div th:replace="~{commons::settingtools}"></div>
            <!-- end chat sidebar -->
        </div>
        <!-- end page container -->
        <!-- start footer -->
		<div th:replace="~{commons::footer}"></div>
        <!-- end footer -->
    </div>
    <!-- start js include path -->
    <script src="assets/plugins/jquery/jquery.min.js" ></script>
    <script src="assets/plugins/popper/popper.min.js" ></script>
    <script src="assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script>
	<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- bootstrap -->
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
    <!-- Common js-->
	<script src="assets/js/app.js" ></script>
    <script src="assets/js/layout.js" ></script>
	<script src="assets/js/theme-color.js" ></script>
	<!-- Material -->
	<script src="assets/plugins/material/material.min.js"></script>
    <script src="assets/js/pages/material_select/getmdl-select.js" ></script>
    <script  src="assets/plugins/material-datetimepicker/moment-with-locales.min.js"></script>
	<script  src="assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
	<script  src="assets/plugins/material-datetimepicker/datetimepicker.js"></script>
    <!-- dropzone -->
    <script src="assets/plugins/dropzone/dropzone.js" ></script>
    <script src="assets/plugins/dropzone/dropzone-call.js" ></script>
	<!-- animation -->
	<script src="assets/js/pages/ui/animations.js" ></script>
    <!-- end js include path -->
</body>
</html>